<template>
  <div class="navbar-footer box">
    <div class="foot-list" @click="linkTo(item.path)"  :class="{active:item.path == activePath}" v-for="(item,index) in menuList" :key="index">
      <div class="icon"></div>
      <div class="title">{{item.name}}</div>
    </div>
  </div>
</template>
<script>

  export default {
    data() {
      return {
          menuList:[
            {name:'首页',path:'/'},
            {name:'活动',path:'/activity'},
            {name:'我的',path:'/me'},
          ],
          activePath:''
      };
    },
    components: {},
    mounted() {
      this.activePath = this.$router.currentRoute.path
    },
    methods: {
      linkTo(link){
         this.$router.push(link)
      }
    }
  };
</script>
<style lang="less">
  /*.navbar-footer{*/
    /*position: fixed;*/
    /*left: 0;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*height: .98rem;*/
    /*font-size: .24rem;*/
    /*color: #111;*/
    /*background-color: #fff;*/
    /*box-sizing: border-box;*/
    /*border-top: 1px solid rgba(0, 0, 0, .1);*/
    /*.foot-list{*/
      /*flex: 1;*/
      /*-webkit-box-flex: 1;*/
      /*&:active{*/
        /*background-color: #e1e1e1;*/
      /*}*/
      /*&.active{*/
        /*.icon{*/
          /*background-image: url(../../images/home_selected.png);*/
        /*}*/
        /*.title{*/
          /*color: #0063AE;*/
        /*}*/
      /*}*/
      /*.icon{*/
        /*background-image: url(../../images/home.png);*/
        /*background-size:100%;*/
        /*width: .46rem;*/
        /*height: .39rem;*/
        /*margin: .14rem auto .03rem;*/
      /*}*/
      /*&:nth-child(2){*/
        /*&.active{*/
          /*.icon{*/
            /*background-image: url(../../images/activity_selected.png);*/
          /*}*/
        /*}*/
        /*.icon{*/
          /*background-image: url(../../images/activity.png);*/
          /*background-size:100%;*/
          /*width: .42rem;*/
          /*height: .41rem;*/
          /*margin: .14rem auto .03rem;*/
        /*}       */
      /*}*/
      /*&:nth-child(3){*/
        /*&.active{*/
          /*.icon{*/
            /*background-image: url(../../images/me_selected.png);*/
          /*}*/
        /*}*/
        /*.icon{*/
          /*background-image: url(../../images/me.png);*/
          /*background-size:100%;*/
          /*width: .35rem;*/
          /*height: .39rem;*/
          /*margin: .14rem auto .03rem;*/
        /*}       */
      /*}*/
      /*.title{*/
        /*text-align: center;*/
      /*}*/
    /*}*/
  /*}*/
</style>
